<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>图片横向变换</title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }
    li{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 1050px;
        height: 348px;
        border: 1px solid red;
        margin: 100px auto;
        overflow: hidden; 
    }
    .top{
        width: 1050px;
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid #eee;
    }
    .box-foot{
        width: 1050px;
        overflow: hidden; 
    }
    .box-foot ul{
        width: 1050px;
        position: absolute; 
       
    }
    .box-foot ul li{
        position: absolute;
    }
    .img-left{
        width: 100px;
        height: 300px;
        float: left;
    }
    .img-right{
        width: 100px;
        height: 300px;
        left: 0px;
        z-index: -2;
        position: absolute;  
        overflow: hidden; 
         /* border: 1px solid red;  */
    } 
    .active{
        width: 446px;
        height: 300px;
        position: relative;
        left: 100px;
        top: -20px;
        background-color: lightblue; 
    }
    .clearfix::after{
        content: '';
        display: block;
        overflow: hidden;
        clear: both;
        height: 0;
    }
    .show{
        width: 100px;
        height: 300px;
        position: absolute; 
        left: 0;
        top: 0;
        /* display: none; */
        background-color: rgba(0, 0, 0, 0.5);
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            动漫展示
        </div>
        <div class="box-foot">
            <ul>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/1.jpg" alt=""> 
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第一张第一张第一张第一张第一张第一张第一张</h1> 
                        </div>                  
                    </div>
                </li>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/2.jpg" alt="">
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第二张第二张第二张第二张第二张第二张第二张</h1> 
                        </div>                  
                    </div>
                    
                </li>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/3.jpg" alt="">
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第三张第三张第三张第一张第一张第一张第一张</h1> 
                        </div>                  
                    </div>
                </li>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/4.jpg" alt="">
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第四张第四张第四张第四张第四张第四张第四张</h1> 
                        </div>                  
                    </div>
                    
                </li>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/5.jpg" alt="">
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第五张第五张第五张第五张第五张第五张第五张</h1> 
                        </div>                  
                    </div>
                </li>
                <li class="clearfix">
                    <div class="img-left">
                        <img src="./img/6.jpg" alt="">
                        <div class="show"></div>
                    </div>
                    <div class="img-right">
                        <div class="active">
                            <h1>第六张第六张第六张第六张第六张第六张第六张</h1> 
                        </div>                  
                    </div>
                </li>
                
            </ul>
            
        </div>
    </div>

    <script src="./js/jquery.js"></script>
</body>

</html>
<script> 
    var lastIndex = 0;
    $('.box-foot ul li:first').css('width','546px');
    $('.show:first').hide();
    $('.img-right:first').css('width','546px').css('z-index','-1');
    $('.box-foot ul li').click(function(){
        $('.show').show();
        $('.show').eq($(this).index()).hide();
        var index = $(this).index()+1;
        chang(index);
        if($(this).index() != lastIndex){
            $('.img-right').animate({ width: '100px'}, 300);
            $('.img-right').css('z-index','-2');
            $(this).animate({ width: '546px' }, 300).siblings().animate({ width: '100px' }, 300);
            $('.img-right').eq($(this).index()).animate({ width: '546px' }, 300);
            $(this).find('.img-right').css('z-index','-1');
        }
        lastIndex = $(this).index();
          
    });
   
    var count = 1;
    chang(count);
    function chang(count){
        var Lf=['100','200','300','400','500'];
        var liLf = ['546','646','746','846','946'];
        for(var i = 1;i<count;i++){
            $('.box-foot ul li').eq(i).animate({left:Lf[i-1]*1},300);
        }
        for(var i = count;i<6;i++){
            console.log(i);
            $('.box-foot ul li').eq(i).animate({left:liLf[i-1]*1},300);
        }
    }
    
    
   
</script>